//==============编辑文章界面================
//地址中的id===>>借助于location.search
//console.log(location.search);//?id=1333
//console.log(location.search.split('?id='));//["","1333"]
//console.log(location.search.split('?id=')[1]);// 1333

const id = location.search.split('?id=')[1]
const form = layui.form
const layer = layui.layer


//富文本编辑器的代码
const E = window.wangEditor
const editor = new E('#contentBox')
editor.config.zIndex = 1
editor.create()

// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 2. 裁剪选项
let options = {
  aspectRatio: 400 / 280,
  preview: '.preview'
}



//所有下拉框的数据，先发这个请求，再发文章详情的接口请求
axios.get('/my/article/cates').then(({ data: { data } }) => {
  let newArr = data.map(({ Id, name }) => ` <option value="${Id}">${name}</option>`

  ).join('')
  $('[name=cate_id]').append(newArr);
  //手动渲染更新
  form.render()

  //文章详情
  axios.get('/my/article/' + id).then(({ data: { data, message, status } }) => {
    //console.log(data)
    if (status !== 0) {
      return layer.msg(message)
    }
    //成功
    layer.msg(message)
    //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
    form.val('form', data)
    // 给表单赋值// formTest 即 class="layui-form”所在元素属性 Lay-filter=" 对应的值form. val('form'data
    // 使用 editor.txt.html(...) 设置编辑器内容
    editor.txt.html(data.content)
    //3.初始化裁剪区域
    // 图片的根路径: http://api-breakingnews-web.itheima.net//在做初始化裁剪区域的时候，需要将图片更换下根路径的
    // 注意: 服务器响应回来的封面图片数据在 cover_img中，但是图片地址是不完整的，所以需要手动拼上完整的根路径
    // 3. 初始化裁剪区域====>>换封面
    $image.attr('src', "http://api-breakingnews-web.itheima.net" + data.cover_img).cropper(options)
  })
})



//================= 点击·选择封面· 弹出框，用户选择文件==================
$('#btnChooseCoverImage').on('click', function () {
  $('#fileCover').click()
})

//=============== 给文件域注册change事件，更换裁切区域的图片===================
$('#fileCover').on('change', function () {
  // 获取用户选择的文件
  let files = this.files[0]

  if (!files) {
    return layer.msg('请选择图片')

  }
  //将文件对象转成地址
  const imgSrc = URL.createObjectURL(files)
  //console.log(imgSrc);
  $image.cropper('destroy').attr('src', imgSrc).cropper(options)

})
//==============决定文章的状态是已发布，还是草稿====================
let state//变量state来存储文章的状态（已发布，草稿看接口文档）
$('#btnPublish').on('click', function () {
  state = "已发布"
})
$('#btnSave').on('click', function () {
  state = "草稿"
})


//=============获取表单数据，ajax提交数据============
$('#form').on('submit', function (e) {
  e.preventDefault()
  // 收集表单数据 ==> 接口要求的是 FormData格式数据(内容 + 封面没有收集到，所以后续通过append来追加)
  let fd = new FormData(this)
  // console.log(fd)打印不出来，使用以下检测fd收集到的数据
  //fd.forEach((value, name) => { console.log(name, value) })
  //对于FormData收集不到的数据， 可以使用append方法
  //语法: fd.append(name，value);name看接口文档
  //收集到了富文本编辑器内容
  //editor.txt.html() ==> 可以获取到富文本编辑器的内容
  fd.append('content', editor.txt.html())
  fd.append('state', state)
  fd.append('Id', id)
  $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
    })
    .toBlob(function (blob) {
      // 将 Canvas 画布上的内容，转化为文件对象
      // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
      fd.append('cover_img', blob)
     // fd.append('Id',id)
      //fd.forEach((value, name) => { console.log(name, value) })

      //注意发ajax请求的位置,所有数据全部获取才发
      axios.post('/my/article/edit', fd).then(({ data: { status, message } }) => {
        //失败
        if (status !== 0) {
          return layer.msg(message)
        }
        //成功
        layer.msg('更新文章成功', { time: 1500 }, function () {
          location.href = '/article/art_list.html'
        })
      })
    })
})